<template>
  <div class="syfooter">
    <van-tabbar route v-model="tabindex" active-color="#07c160" inactive-color="#000">
      <van-tabbar-item
        v-for="tabbar in tabbars"
        :key="tabbar.name"
        :to="tabbar.path"
        :icon="tabbar.meta.icon"
      >{{tabbar.meta.title}}</van-tabbar-item>
     <!-- <van-tabbar-item to="/mall" icon="bag-o">商城</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="mine" icon="user-o">我的</van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>
import routes from '../router/routes.js'
export default {
  name: 'Syfoot',
  data () {
    return {
      tabindex: 0
    }
  },
  computed: {
    tabbars () {
      return routes.filter(route => route.meta.isTabbar)
    }
  },
  created () {
  }
}
</script>

<style scoped>
.syfooter{
  width: 100%;
  height: 100%;
}
.syfooter .van-tabbar{
  background-color: rgba(245, 246, 250,1.0);
}
</style>
